<template>

    <el-form :model="form" :rules="rules">
        <el-form-item label="所属学科" :label-width="formLabelWidth" prop="subjectID">
        <el-select v-model="form.subjectID" placeholder="请选择学科">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in newList" :key="index" />
        </el-select>
        </el-form-item>
        <el-form-item label="标签名称" :label-width="formLabelWidth" prop="tagName">
            <el-input v-model="form.tagName" autocomplete="off" />
        </el-form-item>

        <el-row type="flex" justify="center">

          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addDir">确认</el-button>

      </el-row>
    </el-form>

</template>

<script>
import { onMounted, reactive, ref, nextTick } from 'vue'
import { simple } from '@/api/hmmm/subjects.js'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/hmmm/tags'

export default {
  name: '',
  components: {},
  props: {
    fixForm: {
      type: Object,
      required: true
    }
  },
  setup (props, { emit }) {
    const form = reactive({
      subjectID: undefined,
      tagName: undefined
    })

    const rules = reactive({
      subjectID: [{
        required: true,
        message: '字段值不可为空'
      }],
      tagName: [{
        required: true,
        message: '字段值不可为空'
      }]
    })

    const newList = ref([])

    const getS = async () => {
      const res = await simple()
      console.log(res)
      newList.value = res.data
    }

    const cancel = () => {
      emit('close')
      form.tagName = undefined
    }

    const addDir = async () => {
      if (props.fixForm.id) {
        props.fixForm.tagName = form.tagName
        props.fixForm.subjectID = form.subjectID
        await update(props.fixForm)
        props.fixForm.id = undefined
      } else {
        await add({
          tagName: form.tagName,
          subjectID: form.subjectID
        })
      }

      emit('close')
      ElMessage.success('操作成功')
      emit('resetList')
    }

    onMounted(() => {
      getS()
    })

    return {
      form,
      rules,
      newList,
      getS,
      addDir,
      cancel
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 300px;
}
/deep/ .el-input--suffix {
    width: 283px;
}
</style>
